<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
  	<title>新增收货地址--东西互联网</title>
    <link rel="stylesheet" href="css/mui.css" />
    <link rel="stylesheet" href="css/muiicon.css" />
    <link rel="stylesheet" href="css/jquery.mmenu.all.css" />
    <link rel="stylesheet" href="css/default.css" />
    <link rel="stylesheet" href="css/mui.picker.min.css" />
    <link rel="stylesheet" href="css/mui.poppicker.css" />
    <style>
    		.mui-content .mui-btn{padding: 10px;margin: 20px 10px;background-color: rgb(224,125,125);}
    		#citySelector{padding-top: 8px; font-size: 14px; }
    		.mui-input-row label{width: 28%;font-size: 14px; }
    		.mui-input-row label ~ input, .mui-input-row label ~ select, .mui-input-row label ~ textarea{width: 72%;}
    		.mui-input-row .mui-btn {width: auto;padding: 3px 2px;margin: 0;}
    		
    </style>
</head>
	<body>
			<div class="page">
				<header class="mui-bar mui-bar-nav" >
					 <a href="javascript:history.back();"  class="mui-action-back mui-btn mui-btn-link mui-btn-nav mui-pull-left">
						<span class="mui-icon mui-icon-left-nav"></span> <span class="title">新增收货地址</span></span>
					</a>
					<h1 class="mui-title" id="title"></h1>
				</header>
				<div class="mui-content">
					<!-- 收货地址列表  -->
					<ul class="mui-table-view mui-input-group">
						<div class="mui-input-row">
							<label>收件人</label>
							<input type="text"  id="name" name="name" placeholder="收件人" />
						</div>
						<div class="mui-input-row">
							<label>手机号</label>
							<input type="tel"  id="mobileTelephone" name="mobileTelephone"  placeholder="手机号" />
						</div>
						<div class="mui-input-row">
							<label>地址</label>
							<div id="citySelector" >
								<span id="cityResult"></span><a id="showCityPicker" class="mui-btn mui-btn-danger mui-pull-left">选择地点</a>
							</div>
						</div>
						<div class="mui-input-row" style="height: auto;">
							<label>详细地址</label>
							<textarea cols="20" rows="2" name="address" style="border: 1px solid #ddd;margin: 3px 0;padding: 3px;"></textarea>
						</div>
						<div class="mui-input-row">
							<label>邮政编号</label>
							<input type="tel"  id="youbian" name="youbian"  placeholder="邮编" />
						</div>
					</ul>
					<a class="mui-btn mui-btn-danger mui-btn-block" >确认保存</a>
					<!-- end 收货地址列表  -->
				</div>
			</div>
		
		<script type="text/javascript" src="js/jquery-2.1.0.js" ></script>
		<script type="text/javascript" src="js/jquery.mmenu.min.all.js" ></script>
		<script type="text/javascript" src="js/jquery.SuperSlide.2.1.1.js" ></script>
		<script type="text/javascript" src="js/mui.min.js" ></script>
		<script type="text/javascript" src="js/mui.picker.min.js" ></script>
		<script type="text/javascript" src="js/mui.poppicker.js" ></script>
		<script type="text/javascript" src="js/city.data-3.js" ></script>
		<script>
			 	var cityPicker = new mui.PopPicker({
						layer: 3
					});
					cityPicker.setData(cityData3);
					var showCityPickerButton = document.getElementById('showCityPicker');
					var cityResult = document.getElementById('cityResult');
					showCityPickerButton.addEventListener('tap', function(event) {
						cityPicker.show(function(items) {
							cityResult.innerText =   (items[0] || {}).text + " " + (items[1] || {}).text + " " + (items[2] || {}).text;
							//返回 false 可以阻止选择框的关闭
							//return false;
						});
					}, false);
		</script>
	</body>
</html>
